<template>
	<view class="sideBox">
		<view class="center">
			<!-- 头部 -->
			<view class="header">
				<text>{{list.last_found_title}}</text>
				<!-- 头像姓名信息 -->
				<view>
					<image :src="list.avatarurl"></image>
					<text>{{list.username}}</text>
				</view>	
			</view>
			<!-- 内容部分 -->
			<view class="content">
				<view class="con1">
					<text>{{list.last_found_withtitle}}</text>	
				</view>
				<view class="con2" v-for="(item,index) in list.imagesList">
					<image :src="item.img_url"></image>	
				</view>
	
			</view>
			<!-- 联系同学 -->
			<view class="contact">
				<navigator class="">
					<text>联系同学领取</text>
				</navigator>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
export default{
	data(){
		return{
			id:'',
			list:{}
		}
	},
	mounted(){
		this.$http({
			url:'/lastfound/findAllLastFound'
		}).then(res => {
			console.log(res.data.data);
			const info=res.data.data.find(item=>{
				return item.id==this.id
			})
			this.list=info;
			console.log(this.list);
		})
	},
	onLoad(e){
		// console.log(e);
		this.id = e.id;
	}
}
</script>

<style lang="less" scoped>
.sideBox {
	width: 750rpx;
	.center {
		width: 690rpx;
		margin: 0 auto;
		.header {	
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-top: 60rpx;
			height: 122rpx;
			text:nth-child(1) {
				font-size: 44rpx;
				font-weight: 600;
			}
			view{
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					
				}
				text {
					font-size: 28rpx;
					
				}
			}
	    };
		.content {
			// height: 525rpx;
			display: flex;
			padding-top: 40rpx;
			flex-direction: column;
			justify-content: space-between;
			.con1 {
				text {
					font-size: 28rpx;
					color: #777;
				}
				
			};
			.con2 {
				width: 690rpx;
				// height: 440rpx;
				image {
					width: 690rpx;
					height: 440rpx;
				}
			};
		};
		.contact {
			width: 690rpx;
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
			// position: absolute;
			// left: 4%;
			// bottom: 4%;
			border-radius: 45rpx;
			background: #f9cc66;
		}
    }

}
</style>
